<template>
  <div class="runOrderList" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="我的订单"></myHead>
      <div class="orderType">
          <div class="orderTypeItem" v-for="(x,y) in typeList" @click="switchType(y)">
              <p :class="present == y?'orderTypeItemText orderTypeItemTexted':'orderTypeItemText'">{{x.text}}</p>
              <transition name="el-zoom-in-center">
                <p v-show="present == y"></p>
              </transition>
          </div>
      </div>
      <div class="orderItemWrap" v-show="!isLoading && orderList.length>=1">
          <div class="order-item" >
              <div class="order-item-tit">
                  <p><img src="../../../static/img/od001.png" alt=""><span>取送件</span></p>
                  <p>待付款</p>
              </div>
              <div class="order-item-info">
                <div class="order-item-info-top">
                  <p><img src="../../../static/img/od002.png" alt=""></p>
                  <div class="userInfo">
                    <p>西安市-雁塔区曲江池东路28号楼1403室</p>
                    <p>张晓明  1891049125</p>
                  </div>
                </div>
                <div class="order-item-info-top">
                  <p><img src="../../../static/img/od004.png" alt=""></p>
                  <div class="userInfo">
                    <p>西安市-雁塔区曲江池东路28号楼1403室</p>
                    <p>李大宝  1891049125</p>
                  </div>
                </div>
              </div>
              <div class="order-item-time">
                <img src="../../../static/img/od003.png" alt="">
                <p>下单时间：2018-10-26  14:18:00</p>
              </div>
              <div class="order-item-btn">
                  <p @click="goInfo('待支付')">查看详情</p>
                  <p @click="goPayment">马上支付</p>
              </div>
          </div>
          <div class="order-item">
              <div class="order-item-tit">
                  <p><img src="../../../static/img/od001.png" alt=""><span>取送件</span></p>
                  <p>待付款</p>
              </div>
              <div class="order-item-info">
                <div class="order-item-info-top">
                  <p><img src="../../../static/img/od002.png" alt=""></p>
                  <div class="userInfo">
                    <p>西安市-雁塔区曲江池东路28号楼1403室</p>
                    <p>张晓明  1891049125</p>
                  </div>
                </div>
                <div class="order-item-info-top">
                  <p><img src="../../../static/img/od004.png" alt=""></p>
                  <div class="userInfo">
                    <p>西安市-雁塔区曲江池东路28号楼1403室</p>
                    <p>李大宝  1891049125</p>
                  </div>
                </div>
              </div>
              <div class="order-item-time">
                <img src="../../../static/img/od003.png" alt="">
                <p>下单时间：2018-10-26  14:18:00</p>
              </div>
              <div class="order-item-btn">
                  <p @click="goInfo('待接单')">查看详情</p>
                  <p>马上支付</p>
              </div>
          </div>
      </div>
    <van-loading color="#FF7611" size=".17rem" text-size=".14rem" class="jiazai" v-show="isLoading">加载中...</van-loading>
      <div class="noOrder" v-show="orderList.length<1 && !isLoading">
        <img src="../../../static/img/orderNo.png" alt="">
        <p>暂时还没有此类订单</p>
      </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "runOrderList",
    components:{
      myHead
    },
    data(){
      return {
        typeList:[{text:'待支付'},{text:'待接单'},{text:"进行中"},{text:'已完成'},{text:'已取消'}],
        present:0,
        isLoading:true,
        orderList:[1,2]
      }
    },
    created() {
      this.isLoading = false;
    },
    methods:{
      switchType(index) {
        this.present = index;
        this.isLoading = true;
        setTimeout(()=>{
          this.isLoading = false
        },1000)
      },
      goInfo(title){
        this.$router.push({
          name:'runOrderDetails',
          query:{
            title
          }
        })
      },
      goPayment(){
        this.$router.push({
            name:'RunPaymentOrder'
        })
      }
    }
  }
</script>

<style scoped>
  .runOrderList{
    box-sizing: border-box;
    padding-top: 1rem;
    background-color: #F5F5F5;
  }
  .orderType {
    position: fixed;
    top: .5rem;
    height: .5rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #FFFFFF;
     z-index: 88;
  }
  .orderTypeItem {
    width: 20%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
  }
  .orderTypeItemText {
    height: .4rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    line-height: .4rem;
  }
  .orderTypeItemTexted {
    color: #FF7611;
  }
  .orderTypeItem>p:nth-child(2) {
    width: 30%;
    position: absolute;
    bottom: .1rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius: .01rem;
    height: .02rem;
  }

  .orderItemWrap {
    padding: .15rem;
  }
  .order-item {
    background-color: #FFFFFF;
    border-radius:.03rem;
    margin-bottom: .15rem;
  }
  .order-item-tit {
    height: .35rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-right: .1rem;
  }
  .order-item-tit>p:nth-child(1) {
    width: .56rem;
    height: .21rem;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    left: -.06rem;
  }
  .order-item-tit>p:nth-child(1)>img {
    width: 100%;
    max-height: .21rem;
    position: absolute;
    left: 0;
    top: .02rem;
  }
  .order-item-tit>p:nth-child(1)>span {
    position: relative;
    z-index: 1;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
  }
  .order-item-tit>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7611;
  }
  .order-item-info {
    width: 95%;
    margin: 0 auto;
    background-color: #FAFAFA;
    padding: .05rem 0;
  }
  .order-item-info-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .order-item-info-top>p:nth-child(1) {
    width: .4rem;
    text-align: left;
  }
  .order-item-info-top>p:nth-child(1)>img {
    width: .19rem;
    max-height: .22rem;
  }
  .userInfo {
    width: calc(100% - .4rem);
    height: .45rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .userInfo>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .userInfo>p:nth-child(2) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .order-item-time {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding-left: .1rem;
  }
  .order-item-time>img {
    width: .14rem;
    max-height: .14rem;
    margin-right: .07rem;
  }
  .order-item-time>p {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .order-item-btn {
    height: .7rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: .1rem;
  }
  .order-item-btn>p {
    width:1rem;
    height:.34rem;
    background:rgba(255,118,17,1);
    border-radius:.17rem;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    line-height: .34rem;
    color: #FFFFFF;
    text-align: center;
    margin-left: .1rem;
  }

  .noOrder {
    height: 2.7rem;
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .noOrder>img {
    width: 1.63rem;
    max-height: 1.27rem;
    margin-bottom: .4rem;
  }
  .noOrder>p {
    font-size:.17rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #A7A6AB;
  }




  /* 加载中 */
  .jiazai {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
</style>
